<template>
  <div class="viewMain">
    <h2>{{ query.title }}</h2>
    <div class="page-content">
      <h3>一、创建应用</h3>
      <p>1、 联系平台管理员创建一个平台账户，并且该账户拥有创建应用的权限</p>
      <p>2、 登录账号并创建自己的应用，应用名称推荐使用有辨识度的，记住应用创建后生成的秘钥</p>
      <h5>功能图</h5>
      <div class="image">
        <el-image style="width: 100%; height: auto" src="/introduce/api_portal.jpg" :preview-src-list="['/introduce/api_portal.jpg']" fit="cover">
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline" />
          </div>
        </el-image>
      </div>
      <h3>二、应用调用规范</h3>
      <p>为确保开放平台平台接口的安全和稳定性，平台采用多级过滤策略，所以调用方必须传递平台的系统参数，否则视为非法请求。</p>
      <h5>开放平台平台信息</h5>
      <el-table :data="messages" border style="width: 100%">
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="explain" label="说明" />
      </el-table>
      <h5>系统参数</h5>
      <el-table :data="requestHeader" border style="width: 100%">
        <el-table-column prop="paramName" :label="$t('apiList.paramName')" />
        <el-table-column prop="dataType" :label="$t('apiList.dataType')" />
        <el-table-column prop="description" :label="$t('apiList.description')" />
        <el-table-column prop="require" :label="$t('apiList.require')" />
      </el-table>
      <h5>调用流程</h5>
      <div class="codeTemplate">
        <span class="code orange">调用开放平台，需要按照以下步骤：选择接口 > 填充参数 > 生成签名 > 拼装HTTP请求 > 发起HTTP请求> 得到HTTP响应 > 解释json结果</span>
      </div>
      <h5>返回参数</h5>
      <el-table :data="responseParams" border stripe style="width: 100%">
        <el-table-column prop="name" label="参数名称" />
        <el-table-column prop="explain" label="参数说明" />
      </el-table>
      <h5>响应码</h5>
      <p>
        具体请参考&nbsp;&nbsp;&nbsp;
        <el-link type="primary">响应码</el-link>
      </p>
      <h5>SDK地址</h5>
      <el-tabs v-model="tabsModelName" type="card">
        <el-tab-pane label="maven地址" name="maven">
          <div class="codeTemplate">
            <span class="code orange">&lt;dependency&gt;&lt;groupId&gt;com.github.anji-plus&lt;/groupId&gt;&lt;artifactId&gt;anji-open-sdk&lt;/artifactId&gt;&lt;version&gt;1.0.13.RELEASE&lt;/version&gt;&lt;/dependency&gt;</span>
          </div>
        </el-tab-pane>
        <el-tab-pane label="gradle地址" name="gradle">
          <div class="codeTemplate">
            <span class="code orange">compile group: 'com.github.anji-plus', name: 'anji-open-sdk', version: '1.0.13.RELEASE'</span>
          </div>
        </el-tab-pane>
      </el-tabs>
      <div class="column" />
      <div class="column" />
    </div>
  </div>
</template>
<script>
export default {
  name: 'PortalAccess',
  data() {
    return {
      query: this.$route.query,
      id: this.$route.params.id,
      tabsModelName: 'maven',
      requestHeader: [
        {
          paramName: 'appId',
          dataType: 'String',
          description: '应用唯一标识appId',
          source: '平台',
          require: '必填',
        },
        {
          paramName: 'method',
          dataType: 'String',
          description: '接口名称',
          source: '平台',
          require: '必填',
        },
        {
          paramName: 'sign',
          dataType: 'String',
          description: '应用签名，用于验证访问接口的合法性',
          source: '平台',
          require: '必填',
        },
        {
          paramName: 'timestamp',
          dataType: 'String',
          description: '时间戳，用于生成sign时使用',
          source: '平台',
          require: '必填',
        },
      ],
      responseParams: [
        {
          name: 'code',
          explain: '平台响应码',
        },
        {
          name: 'msg',
          explain: '平台响应信息',
        },
        {
          name: 'content',
          explain: '接口返回的数据',
        },
      ],
      messages: [
        {
          name: '平台地址',
          explain: 'http://open.anji-plus.com/anji-open/open-api/request',
        },
      ],
    }
  },
  methods: {},
}
</script>

<style scoped lang="scss">
.viewMain {
  overflow: hidden;
  padding: 0 20px;
  .column {
    height: 30px;
  }
  h2 {
    font-size: 20px;
    line-height: 60px;
    border-bottom: 1px solid #dcdfe6;
    padding-left: 10px;
  }
  .page-content {
    line-height: 1.2em;
  }
  .codeTemplate {
    background: #f7f7f7;
    font-size: 14px;
    color: #333;
    padding: 20px;
    margin-top: 20px;
  }
  .code {
    margin: 0;
    word-break: break-all;
  }
  p {
    margin-bottom: 10px;
    font-size: 14px;
    color: #3d4145;
  }
  h3 {
    font-size: 16px;
    margin: 20px 0;
    color: #333;
  }
  h5 {
    font-size: 14px;
    margin-bottom: 10px;
    color: #333;
  }
  .item {
    margin: 20px;
  }
  .red {
    color: rgb(249, 38, 114);
  }
  .orange {
    color: #e29629;
  }
  .black {
    color: #000;
  }
  .image {
    width: 100%;
  }
}
</style>
